import { ref } from "vue";
import {
    GetTemplateType,
    GetUpdateCaseList,
    GetHomeCaseList,
    GetHomeTemplateList,
    GetHomeNewsList,
    GetHomeWorksList,
    GetBanner,
    GetHomeTemplateCategory,
    SetPlatformModuleViews,
} from "~/api";

export const useContent = () => {
    const SystemList = ref([
        {
            image: _oss_ + "images/home/system-1.jpg",
            title: "极速输出",
            desc: "快速构建3d课件、展厅",
        },
        {
            image: _oss_ + "images/home/system-2.jpg",
            title: "多端分享",
            desc: "一键分享、多端互动",
        },
        {
            image: _oss_ + "images/home/system-3.jpg",
            title: "促销转化",
            desc: "社交、卖货",
        },
        {
            image: _oss_ + "images/home/system-4.jpg",
            title: "数据运营",
            desc: "数据可视化、个性化推荐",
        },
    ]);

    const pageStore = usePageStore();
    const BannerList = ref([]);
    const UpdateList = ref([]);
    const CaseList = ref([]);
    const WorksList = ref([]);
    const TemplateList = ref([]);
    const NewsList = ref([]);
    const templateTabActive = ref(0);
    const templateTabList = ref([]);
    const templateCategoryList = ref({});
    const templateCategoryActive = ref(-1);
    const templateLoad = ref(false);

    const thirdTabActive = ref([
        [0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0],
    ]);
    const caseTabActive = ref([
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    ]);
    const worksTabActive = ref(1);
    const worksTabList = ref([
        {
            label: "3D展厅",
            value: 1,
        },

        {
            label: "互动课件",
            value: 2,
        },
    ]);
    const worksLoad = ref(false);
    const userStore = useUserStore();

    const GetUpdateList = async () => {
        const res = await GetUpdateCaseList()

        if (res.code == 200) {
            UpdateList.value = res.data;
        }
    }

    const GetCaseList = async () => {
        const res = await GetHomeCaseList({
            // dev: process.env.NODE_ENV === "development",
        });
        if (res.code == 200) {
            CaseList.value = res.data;
            caseTabActive.value = Array.from(
                { length: res.data.length },
                () => [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            );
        } else {
            Message().error(res.msg);
        }
    };

    const GetTemplateList = async () => {
        let active = templateTabActive.value;
        let type_id = templateTabList.value[active].id;
        let category_id = templateCategoryActive.value;
        templateLoad.value = true;


        const isOtherTemplate = String(category_id).includes('kj_');
        const res = await GetHomeTemplateList({
            type_id: isOtherTemplate ? String(category_id).replace('kj_', '') : type_id,
            category_id: isOtherTemplate ? -1 : category_id,
        });
        templateLoad.value = false;

        if (res.code == 200) {
            TemplateList.value = [...res.data];
        }
    };

    watch(templateTabActive, () => {
        templateCategoryActive.value = -1; // 重置分类
        GetTemplateList();
    });

    watch(worksTabActive, () => {
        GetWorksList(pageStore.isMobile ? 4 : 8);
    });

    const GetNewsList = async (size = 6) => {
        const res = await GetHomeNewsList({
            size,
        });

        if (res.code == 200) {
            NewsList.value = res.data;
        }
    };

    const GetBannerList = async (category_id) => {
        const res = await GetBanner({ category_id });
        if (res.code == 200) {
            BannerList.value = res.data;
        }
    };

    const GetWorksList = async (size = 8) => {
        const active = worksTabActive.value;
        worksLoad.value = true;
        const res = await GetHomeWorksList({ size, type: active });
        worksLoad.value = false;
        if (res.code == 200) {
            WorksList.value = res.data;
        }
    };

    const onJumpPath = (path, open, login) => {
        if (!login || userStore.isLogin) {
            if (path) {
                if (path.startsWith("http")) {
                    window.open(path);
                } else {
                    navigateTo(path, {
                        open,
                    });
                }
            }
        } else {
            LoginModal(true, { url: path }, {}, open);
        }
    };

    const GetCaseChild = (item, index, cIndex, cIndex2) => {
        return item.child && item.child.length
            ? item.child[0] && item.child[0].child
                ? item.child[caseTabActive.value[index][cIndex]]
                    ? cIndex2 !== undefined
                        ? item.child[caseTabActive.value[index][cIndex]].child[cIndex2]
                            ? item.child[caseTabActive.value[index][cIndex]].child[cIndex2].child : []
                        : item.child[caseTabActive.value[index][cIndex]].child
                    : []
                : item.child
            : [];
    };

    const GetType = async () => {
        const { typeList } = useTemplate();

        templateTabList.value = typeList.map((item, index) => {
            return {
                label: item.name,
                value: index,
                id: item.id,
                code: item.code,
            };
        });
    };

    const GetTemplateCategory = async () => {
        const res = await GetHomeTemplateCategory();
        if (res.code == 200) {
            let data = {
                template: res.data.template,
                courseware: [
                    ...res.data.courseware,
                    {
                        id: 'kj_7',
                        name: "冶金模板",
                    },
                    ...(userStore.userInfo.level == 3 ?
                        [
                            {
                                id: 'kj_4',
                                name: "消防模版",
                            },
                            {
                                id: 'kj_5',
                                name: "湛江模板",
                            },
                            {
                                id: 'kj_6',
                                name: "厦门电力模板",
                            },
                            {
                                id: 'kj_9',
                                name: "医疗模板",
                            },
                            // {
                            //     id: 'kj_10',
                            //     name: "水务行业"
                            // }
                        ] : [])
                ]
            }
            templateCategoryList.value = data;
        }
    };

    const onTemplateCategoryChange = async () => {
        GetTemplateList();
    };

    SetPlatformModuleViews({ name: "首页" });

    return {
        SystemList,
        UpdateList,
        CaseList,
        caseTabActive,
        WorksList,
        templateTabActive,
        templateTabList,
        TemplateList,
        templateCategoryList,
        templateCategoryActive,
        NewsList,
        BannerList,
        worksTabActive,
        worksTabList,
        templateLoad,
        worksLoad,
        thirdTabActive,
        onTemplateCategoryChange,
        onJumpPath,
        GetCaseList,
        GetUpdateList,
        GetTemplateList,
        GetNewsList,
        GetBannerList,
        GetWorksList,
        GetTemplateCategory,
        GetCaseChild,
        GetType,
    };
};
